<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字典种类管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>
<table id="dictionaryTable" lay-filter="dictionaryFilter"></table>
<!--行编辑工具栏-->
    <script type="text/html" id="barRowEdit">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--头部编辑工具栏：-->
    <script type="text/html" id="toolbarHead">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        </div>
    </script>

    <!--字典种类添加表单-->
    <form id="dictionaryAddForm" class="layui-form" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">字典类型</label>
            <div class="layui-input-block">
                <select name="typeId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字典种类</label>
            <div class="layui-input-block">
                <input type="text" name="dictionaryName" required  lay-verify="required" placeholder="请输入字典种类名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark"  placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="dictionaryAddFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!--字典种类更新表单-->
    <form id="dictionaryUpdateForm" class="layui-form" lay-filter="dictionaryUpdateFilter" style="display: none">
        <input type="hidden" name="dictionaryId">
        <div class="layui-form-item">
            <label class="layui-form-label">字典类型</label>
            <div class="layui-input-block">
                <select name="typeId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字典种类</label>
            <div class="layui-input-block">
                <input type="text" name="dictionaryName" required  lay-verify="required" placeholder="请输入字典种类名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark"  placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="dictionaryUpdateFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['table','layer','jquery','form'], function(){
            let table = layui.table;
            let layer = layui.layer;
            let $ = layui.jquery;
            let form = layui.form;

            //字典种类列表操作
            let dictionaryTable =table.render({
                elem: '#dictionaryTable'
                ,toolbar:'#toolbarHead'
                ,url: '/dictionary/queryAll' //数据接口
                ,page: true //开启分页
                ,cellMinWidth: 80
                ,cols: [
                    [//表头
                    {type:'checkbox',fixed:'left'}
                    ,{field: 'dictionaryId', title: 'ID', sort: true, fixed: 'left'}
                    ,{field: 'typeId', title: '类型ID', sort: true}
                    ,{field: 'typeName', title: '类型名称'},
                    ,{field: 'dictionaryName', title: '字典种类'}
                    ,{field: 'createBy', title: '创建人'}
                    ,{field: 'createTime', title: '创建时间', sort: true}
                    ,{field: 'updateBy', title: '更新人', sort: true}
                    ,{field: 'updateTime', title: '更新时间', sort: true}
                    ,{field: 'remark', title: '备注'}
                    ,{fixed: 'right', title:'操作',align:'center',  width: 120,toolbar: '#barRowEdit'}
                ]
                ]
            });

            //行编辑工具栏    监听工具条
            table.on('tool(dictionaryFilter)', function(obj){
                let data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"/dictionary/deleteById",
                            type:"DELETE",
                            data:{dictionaryId:data.dictionaryId},
                            dataType:"json",
                            success:function (resp) {
                                if(resp.code===0){
                                    dictionaryTable.reload();
                                }
                            },
                            error:function () {
                                layer.msg("请求失败");
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    // layer.alert('编辑行：<br>'+ JSON.stringify(data));
                    form.val("dictionaryUpdateFilter",data);
                    layer.open({
                        type: 1,
                        area: ['600px', '400px'],
                        content: $('#dictionaryUpdateForm')
                    });
                }
            });

            //头部工具栏点击触发事件
            table.on('toolbar(dictionaryFilter)', function(obj){
                let checkStatus = table.checkStatus(obj.config.id);
                let  checkData = checkStatus.data;
                switch(obj.event){
                    case 'add':
                        document.getElementById("dictionaryAddForm").reset();
                        layer.open({
                            type: 1,
                            area: ['600px', '400px'],
                            content: $('#dictionaryAddForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        break;
                    case 'delete':
                        if(checkData.length===0){
                            layer.msg('请至少选择一行数据');
                            return;
                        }
                        layer.confirm('真的删除这些行么', function(index) {
                        let dictionaryIds = "";
                        for (let i = 0; i <checkData.length; i++) {
                            dictionaryIds+=checkData[i].dictionaryId+",";
                        }
                        dictionaryIds = dictionaryIds.substr(0, dictionaryIds.length - 1);
                            $.ajax({
                                url:"/dictionary/deleteByIds",
                                type:"DELETE",
                                data:{dictionaryIds:dictionaryIds},
                                dataType:"json",
                                success:function (resp) {
                                    if(resp.code===0){
                                        dictionaryTable.reload();
                                    }
                                },
                                error:function () {
                                    layer.msg("请求失败");
                                }
                            });
                        });
                        break;
                    case 'update':
                        // layer.msg('编辑');
                        if(checkData.length!==1){
                            layer.msg('编辑只能选中一行');
                            return;
                        }
                        form.val("dictionaryUpdateFilter",checkData[0]);
                        layer.open({
                            type: 1,
                            area:['600px', '400px'],
                            content: $('#dictionaryUpdateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        break;
                }
            });

            //监听头部工具栏添加提交
            form.on('submit(dictionaryAddFilter)', function(data){
                $.ajax({
                    url:"/dictionary/insert",
                    type:"POST",
                    data:data.field,
                    dataType:"json",
                    success:function (resp) {
                        if(resp.code===0){
                            layer.closeAll('page');
                            dictionaryTable.reload();
                        }
                    },
                    error:function () {
                        layer.msg("请求失败");
                    }
                });
                return false;
            });

            //监听行工具栏更新
            form.on('submit(dictionaryUpdateFilter)', function(data){
                $.ajax({
                    url:"/dictionary/update",
                    type:"PUT",
                    data:data.field,
                    dataType:"json",
                    success:function (resp) {
                        if(resp.code===0){
                            layer.closeAll('page');
                            dictionaryTable.reload();
                        }
                    },
                    error:function () {
                        layer.msg("请求失败");
                    }
                });
                return false;
            });

            //填充类型下拉框
            let $typeSelect = $("select[name=typeId]");
            let options = '';
            $.ajax({
                url: "/dictionary/selectAllType",
                type: "GET",
                dataType: "JSON",
                success: function (res) {
                    for (let i = 0; i < res.data.length; i++) {
                        options += '<option value="' + res.data[i].typeId + '">' + res.data[i].typeName + '</option>';
                    }
                    $typeSelect.html(options);
                }
            });

        });
    </script>
</body>
</html>